<template>
  <div class="log-box-main">
    <h2>账号邮箱登录</h2>
    <ul class="login-lists">
      <li>
        <input type="text" placeholder="邮箱或ID" class="input-acount" v-model="account" @input="clearTxt('accountTips')">
        <div class="clear-btn" v-show="account.trim()" @click="clearTxt('account')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-untitled94"></use>
          </svg>
        </div>
      </li>
      <LogTips :tips="accountTips" v-if="accountTips.trim()"></LogTips>
      <li>
        <input :type="passwordType" class="input-password" placeholder="请输入密码" v-model="password" @input="clearTxt('passwordTips')">
        <div class="password-deal flex-box" v-show="password">
          <svg class="icon icon-pass01" aria-hidden="true" @click="tabPassword">
            <use :xlink:href="eyeIcon"></use>
          </svg>
          <div class="password-line"></div>
          <svg class="icon icon-pass02" aria-hidden="true" @click="clearPassword">
            <use xlink:href="#icon-gb-untitled94"></use>
          </svg>
        </div>
      </li>
      <LogTips :tips="passwordTips" v-if="passwordTips.trim()"></LogTips>
      <li class="yan-zheng">
        <input type="number" oninput="if(value.length>4)value=value.slice(0,4)" @input="clearTxt('yzmTips')" v-model="yanZhengMa" placeholder="图形验证码">
        <div class="yzm-box" @click="resetYzm">
          <img :src="yamLoading">
        </div>
      </li>
      <LogTips :tips="yzmTips" v-if="yzmTips.trim()"></LogTips>
    </ul>
    <div class="commit-btn">
      <button class="flex-box" @click="commintLogin" :disabled='isLoging'>登录
        <span class="flex-box" v-show="isLoging">中 <img src="../../assets/img/more-loading-w.gif"></span>
      </button>
    </div>
  </div>
</template>

<script>
import LogTips from '@/components/Login/LogTips.vue'
export default {
  name: 'home',
  data() {
    return {
      account: '',
      password: '',
      passwordType: 'password',
      yanZhengMa: '',
      eyeIcon: '#icon-gb-eyepageview',
      accountTips: '',
      passwordTips: '',
      yzmTips: '',
      LoginType: '-1',
      remember: 1
    }
  },
  props: ['isLoging', 'isRemember', 'yamLoading', 'pageBMsg', 'getLoginType'],
  components: {
    LogTips
  },
  computed: {},
  methods: {
    clearTxt(data) {
      this[data] = ''
    },
    tabPassword() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
      this.eyeIcon =
        this.passwordType === 'password' ? '#icon-gb-eyepageview' : '#icon-gb-eye-close'
    },
    clearPassword() {
      this.password = ''
    },
    toRegister() {
      this.$router.push('/register')
    },
    resetYzm() {
      this.yanZhengMa = ''
      this.$bus.$emit('resetLogYam')
    },
    commintLogin() {
      this.LoginType = this.getLoginType(this.account)
      this.remember = this.isRemember ? 1 : 0
      console.log(this.LoginType)
      if (!this.account.trim()) {
        this.account = ''
        this.accountTips = '✱ 请输入您的账号'
        return
      } else if (!this.password.trim()) {
        this.password = ''
        this.passwordTips = '✱ 请输入密码'
        return
      } else if (!this.yanZhengMa.trim()) {
        this.yanZhengMa = ''
        this.yzmTips = '✱ 请输入验证码'
        return
      } else {
        let data = {
            loginname: this.account,
            password:
              this.LoginType === 100 ? this.password : this.$md5(this.password.toLowerCase()),
            logintype: this.LoginType,
            targetUrl: this.$route.query.redirect,
            vcode: this.yanZhengMa,
            remember: this.remember
          },
          storage = {
            loginname: this.account,
            password: this.password,
            page: 2
          }
        this.$bus.$emit('commitLogin', data, storage)
      }
    }
  },
  created() {
    if (this.pageBMsg) {
      this.account = this.pageBMsg.loginname
      this.password = this.pageBMsg.password
    }
  },
  mounted() {}
}
</script>
